<template>

<div ref='wrapper' class="wrapper">
   <div>
  <!-- hot -->
    <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">

            <li class="hot-item"
            v-for='item in hotCities'
            :key='item.id'
			@click="changeCityName(item.name)">
                {{item.name}}
            </li>
        </ul>
    </div>


<!--sort  -->
       <div class="sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
            <li class="sort-item"
            v-for='(val,key) in cities'
            :key="item.id"
			@click='changeSort(key)'
            >
                {{key}}
            </li>
          
        </ul>
    </div>

<!-- list -->
    <div class="list">
        <div v-for='(item,key,index) in cities'
		:ref='key'>
            <div class="list-title">{{key}}</div>
            <ul class="list-mag">

                <li class="list-item"
                v-for="(value,key,index) in item"
				@click="changeCityName(value.name)"
                >
                   {{value.name}}
                </li>
            </ul>
              </div>
          </div>
	   </div>	
	</div>
</template>
<script>
import BScroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
	props:['cities','hotCities'],
	data(){
     return{
		 scroll:'',
		 item:'',
	 }
	},
    mounted(){
		let wrapper=this.$refs['wrapper'];
		this.scroll=new BScroll(wrapper);
    },
	methods:{
		changeSort(sortname){
			this.scroll.scrollToElement(this.$refs[sortname][0]);
		},
		changeCityName(cityname){
			 this.$store.commit('changeCity',cityname)
             this.$router.push('./')        
		},
	}
}
</script>
<style lang="stylus" scoped>
@import '~css/common.styl';
.wrapper{
	position: absolute;
	overflow:hidden;
	left:0;
	right:0;
	bottom:0;
	top:.88rem;
	background:#f5f5f5;
}
.hot-title{
	font-size:.24rem;
	color:#212121;
	padding:.2rem .3rem;
}
.hot-list{
	position: relative;
	overflow: hidden;
	background: #fff;
	font-size:.28rem;
	color:#212121;
}
.hot-list:before{
	content: " ";
	position: absolute;
	height: 100%;
	width:33.33%;
	left:33.33%;
	border-left:.02rem solid #ddd;
	border-right: .02rem solid #ddd;
}
.hot-item{
	position:relative;
	width:33.33%;
	text-align: center;
	height:.9rem;
	line-height: .9rem;
	float:left;
	border-bottom:.02rem solid #ddd;
}
.sort-title{
	font-size:.24rem;
	color:#212121;
	padding:.2rem .3rem;
}
.sort-list{
	position: relative;
	overflow: hidden;
	background: #fff;
	font-size:.28rem;
	color:#212121;
}

.sort-item{
	position:relative;
	width:16.666%;
	text-align: center;
	height:.9rem;
	line-height: .9rem;
	float:left;
}
.list-title{
	font-size:.24rem;
	color:#212121;
	padding:.2rem .3rem;
}
.list-mag{
	position: relative;
	background: #fff;
	overflow: hidden;
}
.list-mag:before{
	content: " ";
	position: absolute;
	left:25%;
	width:25%;
	height: 100%;
	border-left:.02rem solid #ddd;
	border-right:.02rem solid #ddd;
}
.list-mag:after{
	content: " ";
	position: absolute;
	left:75%;
	width:0%;
	height: 100%;
	border-left:.02rem solid #ddd;
}
.list-item{
	position:relative;
	width:25%;
	font-size:.28rem;
	text-align: center;
	line-height: .9rem;
	float:left;
    border-bottom:.02rem solid #ddd;
    textoverflow()
}

</style>